<template>
  <div>
    <el-container style="border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu
          style="height: 100%"
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="0">
            <!-- <span>商品管理系统</span> -->
            <img
              class="logo"
              src="http://118.24.25.7:5000/img/logo.6f4321c1.png"
            />
          </el-menu-item>
          <router-link to="/index/echart">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
          </router-link>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-shop"></i>
              <span>商品</span>
            </template>
            <el-menu-item-group>
              <router-link to="/index/categroy"
                ><el-menu-item index="2-1" @click="getCategory"
                  ><i class="el-icon-data-line"></i>品类管理</el-menu-item
                ></router-link
              >
              <router-link to="/index/product"
                ><el-menu-item
                  index="2-2"
                  @click="getProduct({ pageNum, pageSize })"
                  ><i class="el-icon-shopping-cart-full"></i
                  >商品管理</el-menu-item
                ></router-link
              >
              <router-link to="/index/attribute"
                ><el-menu-item
                  index="2-3"
                  @click="getAttribute({ pageNum, pageSize })"
                  ><i class="el-icon-connection"></i>规格属性</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户</span>
            </template>
            <el-menu-item-group>
              <router-link to="/index/users"
                ><el-menu-item
                  index="3-1"
                  @click="getUser({ pageNum, pageSize })"
                  ><i class="el-icon-user-solid"></i>用户管理</el-menu-item
                ></router-link
              >
              <router-link to="/index/permission"
                ><el-menu-item
                  index="3-2"
                  @click="getPermission({ pageNum, pageSize })"
                  ><i class="el-icon-share"></i>权限管理</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span>订单</span>
            </template>
            <el-menu-item-group>
              <router-link to="/index/order">
                <el-menu-item
                  index="4-1"
                  @click="getOrder({ pageNum, pageSize })"
                  ><i class="el-icon-coffee-cup"></i>订单管理</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 18px">
          <img class="header-logo" src="../assets/header.jpg" />
          <span>{{ username }}</span>
          <el-dropdown>
            <i class="el-icon-loading" style="margin-left: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><span @click="out()">退出登录</span></el-dropdown-item
              >
              <el-dropdown-item
                ><span @click="open()">头像上传</span></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main style="background-color: #f3f3f3">
          <div>
            <router-view></router-view>
          </div>
        </el-main>
        <div class="footer">@版权所有</div>
      </el-container>
    </el-container>
  </div>
</template>
<style>
* {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  list-style: none;
  text-decoration: none;
}
.header-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}
#app {
  text-align: left;
}
.el-container .is-vertical .el-header {
  background-color: #b3c0d1;
  color: #333;
  padding: 0 60px;
  justify-content: flex-end;
  line-height: 60px;
  display: flex;
  align-items: center;
}
.el-progress_text {
  left: 22%;
  border-radius: 5px;
}
.el-pro {
  background-color: #f0f9eb;
  border-color: #e1f3d8;
  color: #67c23a;
  position: absolute;
  height: 32px;
  padding: 0 10px;
  line-height: 32px;
  font-size: 12px;
  top: 130px;
}
.probox {
  display: flex;
  padding: 20px 20px 0 20px;
  align-items: center;
  background-color: white;
  justify-content: space-between;
}
.progress {
  position: relative;
  padding: 10px 10px 30px 10px;
  border-radius: 4px;
  background-color: rgb(51, 153, 68);
}
.el-aside {
  color: #333;
}
.footer {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
  background-color: #b3c0d1;
}
.el-container {
  height: 631px;
}
.logo {
  width: 180px;
}
</style>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      username: localStorage.username,
      pageNum: 1,
      pageSize: 3,
      parentId: 0,
    };
  },
  methods: {
    ...mapActions([
      "getAttributes",
      "getUsers",
      "getProducts",
      "getPermissions",
      "getOrders",
      "getCategorys",
    ]),
    getAttribute(obj) {
      this.getAttributes(obj);
    },
    getUser(obj) {
      console.log(obj);
      this.getUsers(obj);
    },
    getCategory() {
      console.log(this.parentId);
      var parentId = this.parentId;
      var pageNum = this.pageNum;
      var pageSize = this.pageSize;
      this.getCategorys({ parentId, pageNum, pageSize });
    },

    getOrder(obj) {
      console.log(obj);
      this.getOrders(obj);
    },

    getProduct(obj) {
      console.log(obj);
      this.getProducts(obj);
    },
    getPermission(obj) {
      console.log(obj);
      this.getPermissions(obj);
    },
    out() {
      console.log("111");
      if (confirm("确定退出吗")) {
        localStorage.setItem("token", "");
        this.$router.replace("/");
      }
    },
    open() {
      this.$prompt("请上传图片", "修改头像", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: value + "修改成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
};
</script>